<template>
    <div class="product_detail">

        <div class="header">
            <van-nav-bar title="入库审批" left-arrow @click-left="routerBack"></van-nav-bar>
        </div>

        <div class="contents" :style="{ 'paddingBottom': detailInfo.auditStatus !== '-2' ? '22.4vw' : '0' }">

            <!-- 轮播 -->
            <div class="product_detail_top" id="product_detail_top">
                <div class="product_detail_top_img">
                    <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                        <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                            <van-image class="product_detail_top-image"
                                :src="image + '?x-oss-process=image/resize,w_300'" fit="cover"
                                @click="enlargeImage(index)" />
                        </van-swipe-item>
                        <template #indicator="{ active, total }">
                            <div class="hmshop-custom-indicator fl-box-center">{{ active + 1 }}/{{ total }}</div>
                        </template>
                    </van-swipe>
                    <van-image :src="errImg" v-if="!realSrcList.length" fit="cover"> </van-image>

                    <!-- 轮播多机制 -->
                    <div v-if="hmMechanismsList?.cooperationMode" class="mechanism_mall">
                    </div>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="product_detail_top_details" id="product_detail_title--details">

                <div class="product_stylename">
                    <div class="product_mechanism" v-if="hmMechanismsList?.cooperationMode">多机制</div>
                    <div class="styleName text-el">{{ detailInfo.styleName }}</div>
                </div>

                <!-- 69 -->
                <div class="product_box mt-10" v-if="detailInfo.stockCode || detailInfo.styleCode">
                    <div class="product_fl_box">
                        <div class="box_l" v-if="detailInfo.stockCode">

                            <div class="l_title"><span>库存编码</span></div>
                            <div class="l_code text-el ">{{ detailInfo.stockCode }}</div>
                            <div class="l_copy" @click="copyClick(detailInfo.stockCode)"></div>
                        </div>
                        <div class="box_r" v-if="detailInfo.styleCode">
                            {{ detailInfo.styleCode }}
                            <div class="icon_69"></div>
                        </div>

                    </div>
                </div>
                <!-- 类目、品牌     -->
                <div class="product_ppbox">
                    <div class="pp_item" v-if="detailInfo.productCategoryName"
                        v-for="item in detailInfo.productCategoryName.split(',')" :key="item">{{ item }}</div>
                    <div class="pp_item" v-if="detailInfo.brandName" v-for="item in detailInfo.brandName.split(',')"
                        :key="item">{{ item }}</div>
                </div>
                <!-- 供应商 -->
                <div class="product_gysbox">
                    <div class="gys_l">
                        <div class="gys_img"></div> <span> 供应商：{{ detailInfo.supplierName }}</span>
                    </div>

                    <div class="gys_c"
                        :class="{ style_y: detailInfo.sellStatus == '已签署', style_n: detailInfo.sellStatus == '未签署' }">
                        {{ detailInfo.sellStatus }}</div>
                    <!-- <div class="gys_c">有AB货</div> -->
                </div>

                <div class="product_users mt-10 b-box fl-box-s-b">
                    <div class="product_users_item">
                        <div class="product_users_title">招商员</div>
                        <div class="product_users_text">{{ detailInfo.recruiter }}</div>

                    </div>
                    <div class="line"></div>
                    <div class="product_users_item">
                        <div class="product_users_title">招商部</div>
                        <div class="product_users_text">{{ detailInfo.recruiterDept }}</div>
                    </div>
                </div>



                <div class="product_id mt-10 fl-box-s-b">
                    <div class="produc_left fl-box-s-b b-box">
                        <span>商品编码</span>
                        <span>{{ detailInfo.id }}</span>
                        <span class="copy" @click="copyClick(detailInfo.id)"></span>
                    </div>
                    <div class="coreName fl-box" v-if="detailInfo.coreName">
                        <div class="goods_r_l">{{ detailInfo.liveType }}</div>
                        <div class="goods_r_r">{{ detailInfo.coreName }}</div>
                    </div>
                </div>
                <!-- 规格、材质 -->
                <div class="product_ggbox">
                    <div class="ggimg"> </div>
                    <div>规格/材质：{{ detailInfo.specs }}</div>
                </div>

            </div>


            <!-- 机制 -->
            <div class="mechanism_area" id="product_detail_jizhi">

                <mechanismCardNew :data="detailInfo.hmMechanismsList"></mechanismCardNew>
            </div>
       

            <div class="approvalDetails_box">
                <div class="stepBar">
                    <div class="stepBar_top">
                        <div class="stepBarTitle">
                            <img class="stepBarTitle_img" src="@/assets/porduct/icon_shou.png" alt="">
                            审批结果
                        </div>
                    </div>
                    <div class="stepBar_box">
                        <StepBarHome v-for="(item, index) in ceshi" :key="index" :row="item" :index="index"
                            :langth="ceshi.length" :status="status" :hmMechanismsList="hmMechanismsList" />
                        <div class="stepBar_noData" v-if="!ceshi || !ceshi.length">暂无数据</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="findings_audit">

            <div class="buttonStatus" v-if="detailInfo.stockStatus == 0 && look !== 'look'">
                <div class="buttonStatus_left" @click="audLeft">
                    驳回
                </div>
                <div class="buttonStatus_right" @click="audRight" v-throttle:click>
                    入库
                </div>
            </div>
        </div>
        <van-overlay :show="overlayShow" @click="overlayShow = false" z-index="6001">
            <div class="wrapper" @click.stop>
                <div class="wrapper_div">
                    <van-image :src="colseImg" @click="close"></van-image>
                    <div class="title">驳回建议</div>
                    <van-form @submit="onSubmit">
                        <van-field maxlength="50" show-word-limit v-model="message" rows="6" label="" type="textarea"
                            placeholder="请输入驳回建议" :border="false"
                            :rules="[{ required: true, trigger: 'onBlur', message: '请输入驳回建议' }]" />
                        <van-button class="button" round block type="primary" :loading="loading" loading-text="执行中..."
                            native-type="submit" v-throttle:click>
                            提交确认
                        </van-button>
                    </van-form>
                </div>
            </div>
        </van-overlay>

    </div>
</template>
<script setup lang="ts">
import { computed, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getEnvValue } from "@/utils/index";
import { showSuccessToast } from 'vant';
import { refuse } from '@/api/productHome/index'
import { getStockPcList } from '@/api/productHome/index'
import { showImagePreview, showFailToast } from "vant";
import StepBarHome from '@/views/productSelection/components/stepBar/stepBarHome.vue'
import { copyTextToClipboard } from '@/utils/index'
import mechanismCardNew from '@/views/operation/product/components/mechanismCardNew.vue'
const loading = ref(false)
const route = useRoute();
const router = useRouter();
const detailInfo = ref<any>({});
const realSrcList = ref<string[]>([]);
const ticketSwiper = ref();
const overlayShow = ref(false)
const message = ref('')
// 机制
const hmMechanismsList = ref<any>({})
const hmMechanismsList1 = ref<any>({})
const hmMechanismsList2 = ref<any>({})

const ceshi = ref<any[]>([])
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const colseImg = new URL("@/assets/approval/close.png", import.meta.url).href;
const status = ref()


/** 图片放大 */
const enlargeImage = (index: number) => {
    showImagePreview({
        images: realSrcList.value,
        startPosition: index,
    });
};

/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});

/** 消息中心查看传递的参数 */
const look = computed(() => {
    return route?.query?.look;
});

/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            realSrcList.value.push(url);
        }
    }
};

/** 处理不同状态回显的颜色 */
const handleColor = (auditStatus: string) => {
    if (auditStatus == '0' || auditStatus == '20') {
        return '#B8BECA'
    } else if (auditStatus == '1') {
        return '#FC2540'
    } else {
        return '#0094FF'
    }
}

/** 处理不同状态回显的文字 */
const auditStatusNameById = (auditStatus: string, auditRemark: string, index: number) => {
    if (auditStatus == '0' && index == 0) {
        return '发起审批'
    } else if (auditStatus == '0' && index !== 0) {
        return '重新送审'
    } else if (auditStatus == '2') {
        return '已通过'
    } else if (auditStatus == '1') {
        return '已驳回,' + auditRemark
    } else if (auditStatus == '20') {
        return '变更主播'
    }
}

/** 处理不同状态回显的名字 */
const handleName = (auditStatus: string, auditor: string, createBy: string) => {
    if (auditStatus == '0' || auditStatus == '20') {
        return createBy
    } else {
        return auditor
    }
}

/** 获取详情 */
const getDetail = async () => {
    const res = await getStockPcList({ id: uniquekey.value });
    if (res.rows[0]) {
        detailInfo.value = res.rows[0];
        if (res.rows[0].hmMechanismsList.length) {
            hmMechanismsList.value = res.rows[0].hmMechanismsList[0]
            hmMechanismsList1.value = res.rows[0].hmMechanismsList[1]
            hmMechanismsList2.value = res.rows[0].hmMechanismsList[2]
        }
        if (res.rows[0].productImage) {
            const real_src = res.rows[0].productImage.split(",");
            fetchImagesSequentially(real_src);
        }
        res.rows[0].logList.forEach((item, index) => {
            item.title = auditStatusNameById(item.stockStatus, item.stockAuditRemark, index)
            item.status = item.stockStatus
            item.color = handleColor(item.stockStatus)
            item.name = handleName(item.stockStatus, item.stockName, item.recruiterName)
            item.time = item.createTime
        })
        ceshi.value = res.rows[0].logList.reverse()
        console.log('ceshi', ceshi.value);
    } else {
        showFailToast({
            message: '商品已下架，请刷新页面'
        })
    }
};
getDetail();



/** 驳回 */
const audLeft = async () => {
    overlayShow.value = true
};
/** 入库 */
const audRight = async () => {
    router.push({
        path: '/warehouseConfirmation/' + detailInfo.value.id,
        query: {
            productsId: detailInfo.value.productsId
        }
    })
};
/** 核价建议关闭 */
const close = () => {
    overlayShow.value = false
}
/** 驳回建议提交 */
const onSubmit = async () => {
    loading.value = true
    try {
        await refuse({ stockId: detailInfo.value.id, stockAuditRemark: message.value, productsId: detailInfo.value.productsId })
        showSuccessToast({ type: 'success', message: '驳回成功' });
        loading.value = false
        overlayShow.value = false
        router.back()
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('驳回失败');
        }
        loading.value = false
    }
}
// 返回
const routerBack = () => {
    router.back()
}
onMounted(() => {
    status.value = Number(route?.query?.status)
})
/** 复制 */
const copyClick = (title: string) => {
  copyTextToClipboard(title)
}
</script>
<style lang="less" scoped>
.button {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 60%;
    margin-left: 20%;

    div {
        width: 31%;
        padding: 0 1px;
        text-align: center;
        border-radius: 5px;
        background-color: #0035ff;
        color: #fff;
    }

    .cancel {
        background-color: #f2f0f0;
        color: #000;
    }
}

.pop_div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .pop_div_item {
        width: 22%;
        padding: 0 1px;
        display: flex;
        justify-content: center;

        p {
            width: 80%;
            height: 20px;
            font-size: 10px;
            border: 1px solid #b6b6b6;
            color: #b6b6b6;
            text-align: center;
            line-height: 20px;
        }
    }
}

.product_detail {
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        z-index: 6003;
        top: 0;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;

        .wrapper_div {
            width: 315px;
            background-color: #fff;
            border-radius: 5px;
            position: relative;

            :deep(.van-field__control) {
                background: #F6FAFF !important;
            }

            ::placeholder {
                font-size: 14px;
                color: #B8BECA;
            }

            .title {
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
                width: 100%;
                text-align: center;
                margin: 30px 0 20px 0;
            }

            .van-image {
                width: 10px;
                height: 10px;
                position: absolute;
                right: 18px;
                top: 18px;
            }

            :deep(.van-form) {
                min-height: 265px;
            }

            .button {
                color: #FFFFFF;
                font-size: 14px;
                width: 285px;
                height: 44px;
                background: #0094FF;
                border-radius: 23px;
                margin: auto;
                display: flex;
                justify-content: center;
                margin-top: 10px;
            }
        }
    }

    :deep(.van-nav-bar) {
        background-color: #1466ff;
        height: 46px !important;
        width: 100%;
        position: fixed !important;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }

    &_top {
        width: 98%;
        border-radius: 3px;
        height: 50%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;

        &_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 200px;
                height: 200px;
            }

            :deep(.van-swipe) {
                width: 200px;
                height: 200px;
            }

            :deep(.van-image) {
                width: 200px;
                height: 200px;
            }
        }

        &_details {
            width: 100%;
            margin-top: 20px;

            .info {
                vertical-align: bottom;
                display: flex;
                align-items: center;

                .price {
                    font-weight: 500;
                    font-size: 21px;
                    color: #fc2540;
                }

                .costPrice {
                    color: #a3a3a3;
                    font-size: 10px;
                    margin-left: 10px;
                }



                .commission {
                    color: #ff0000;
                    font-size: 13px;
                    margin-left: auto;
                }
            }

            .liveStreamingMechanism {
                color: #a3a3a3;
                font-size: 10px;
                margin-left: 10px;
            }

            .styleName {
                font-weight: 700;
                line-height: 28px;
                font-size: 18px;
                color: #1a1b1c;
                margin-top: 5px;
                margin-bottom: 5px;

                .liveStreamingMechanisms {
                    width: 66px;
                    height: 26px;
                    background: #0094FF;
                    border-radius: 13px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 26px;
                    text-align: center;
                    display: inline-block;
                }
            }

            .brand,
            .styleCode {
                font-weight: 400;
                font-size: 12px;
                color: #b8beca;
                margin-top: 5px;
            }

            .brand_right {
                margin-left: 20px;
            }
        }
    }

    &_title {
        padding: 10px 15px 0px 15px;
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
    }

    &_bottom {
        width: 98%;
        border-radius: 3px;
        background-color: #fff;
        padding: 15px 15px 60px 12px;
        box-sizing: border-box;

        .tilte {
            display: inline-block;
            margin: 8px 0;
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            padding-bottom: 5px;
        }

        .product_image {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            margin-left: -10px;
            // margin-left: 10%;
            flex-wrap: wrap;

            .product_image_div {
                // margin-right: 5px;
            }
        }

        .vouche_image {
            width: 80%;
            margin-left: 10%;
        }
    }





    .product_detail_top-image {
        width: 375px;
        height: 375px;
        z-index: 999;
        background-size: 100% 100%;
    }

    .product_detail_top_img {
        // border: solid 1px black;
        width: 340px;
        height: 340px;
    }


    .van-swipe-item {
        width: 340px !important;
        height: 340px !important;

        .van-image {
            width: 340px;
            height: 340px;
        }
    }

    .van-swipe {
        width: 340px;
        height: 340px;
    }


    .deails-size {
        display: flex;
        // margin-top: 10px;
    }

    .styleCode {
        margin-left: auto;
        font-weight: 400;
        font-size: 12px;
        color: #b8beca;
    }

    .merchant-style {
        display: flex;
        align-items: center;
        margin-top: 5px;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .merchant-style-size {
        font-size: 12px;
        color: #b8beca;
        line-height: 12px;
        display: flex;
        align-items: center;

        .merchant-style-btn {
            margin-left: 15px;
            width: 66px;
            height: 26px;
            background: #e7fdee;
            border-radius: 13px;
            color: #19d11b;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .launch {
        font-size: 12px;
        color: #0094FF;
    }

    .merchant-style-btn1 {
        margin-left: 10px;
        width: 66px;
        height: 26px;
        background: #ebf4ff;
        border-radius: 13px;
        color: #0094ff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product_detail_title--content {
        // display: flex;
        // border: solid 1px black;
        width: 100%;
        background: #fff;
        padding: 15px;

        .mechanism_title {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            margin-top: 20px;
        }


    }

    .product_detail_title-content-size {
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
        // border: solid 1px black;
    }

    .product_detail_title--heng {
        width: 100%;
        height: 7px;
        background: #f6faff;
    }

    .findings_audit {
        width: 100%;
        // height: 188px;
        background-color: #fff;
        box-sizing: border-box;
        padding: 0 15px;

        .findings_audit_title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
        }

        .findings_audit_content {
            // height: 80px;
            width: 100%;
            display: flex;
            margin-top: 10px;
            justify-content: space-between;
            flex-wrap: wrap;

            .column {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                position: relative;
                line-height: 20px;

                .circle {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin-bottom: 30px;
                    margin-top: 3px;
                }

                .line {
                    height: calc(100% - 10px);
                    position: absolute;
                    border-left: 1px dashed #0094FF;
                    top: 13px;
                    left: 5px;
                }

                .adopt_proposal {
                    font-size: 12px;
                    width: 123px;
                    word-wrap: break-word
                }

                .danger_name {
                    font-size: 12px;
                    color: #B8BECA;
                    width: 40px;
                }

                .danger_date {
                    font-size: 12px;
                    color: #B8BECA;
                    width: 120px;
                }

            }

        }

        .buttonStatus {
            width: 100%;
            height: 84px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
            background: #FFFFFF;
            position: fixed;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            padding: 0 15px;


            .buttonStatus_left {
                background-color: #fff;
                font-weight: 500;
                font-size: 16px;
                color: #0094FF;
                line-height: 44px;
                text-align: center;
                width: 162px;
                height: 44px;
                border-radius: 5px;
                border: 1px solid #0094FF;

            }

            .buttonStatus_right {
                color: #fff;
                text-align: center;
                width: 162px;
                height: 44px;
                background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
                border-radius: 5px;
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 44px;
            }
        }
    }

    .product_detail_title-content-info {
        margin-top: 20px;
        display: flex;
    }

    .product_detail_title-content-info-name {
        font-weight: 400;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 14px;
    }

    .product_detail_title-content-info-content {
        font-weight: 400;
        font-size: 14px;
        color: #b8beca;
        line-height: 14px;
        margin-left: auto;
        word-break: break-all;
    }

    .product_image_div {
        // border: solid 1px black;
        // margin-left: 10px;
    }

    .vouche_image {
        // border: solid 1px black;
        width: 100%;
        margin-left: -10px;
    }

    .vouche_image-style {
        width: 90px;
        height: 90px;
        margin-left: 10px;
        // border: solid 1px black;
    }

    :deep(.van-nav-bar__text) {
        color: #0094ff !important;
    }

    :deep(.van-nav-bar__right) {
        color: #0094FF;
    }
}

.approvalDetails_box {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 15px 15px;
    box-sizing: border-box;
    margin-top: 15px;
}

.stepBar {
    .stepBar_top {
        padding: 0 5px;
    }

    .stepBar_box {
        background: #fff;
        border-radius: 5px;
        padding: 15px;
        box-sizing: border-box;

        .stepBar_noData {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: center;
            font-size: 14px;
            color: #ccc;
        }
    }
}

.stepBarTitle {
    width: 100%;
    height: 46px;
    background: url('@/assets/porduct/icon_shenpijieguobeijing.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 15px;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 16px;
    color: #0094FF;

    .stepBarTitle_img {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }
}

.contents {
    width: 100%;
    height: calc(100% - 0px);
    overflow: auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;
    padding-top: 90px;
    background: #F6FAFF;
    overflow-y: scroll;
}

.product_detail_top {
    width: 100%;
    border-radius: 3px;
    height: 50%;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 0;

    &_img {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        img {
            width: 200px;
            height: 200px;
        }

        :deep(.van-swipe) {
            width: 200px;
            height: 200px;
        }

        :deep(.van-image) {
            width: 200px;
            height: 200px;
        }
    }

    .product_detail_top_img {
        width: 375px;
        height: 320px;
        position: relative;
    }

    .van-swipe-item {
        width: 375px !important;
        height: 320px !important;

        .van-image {
            width: 375px;
            height: 320px;
        }
    }

    .van-swipe {
        width: 375px;
        height: 320px;
    }

    .van-image {
        width: 375px;
        height: 320px;
    }
}
.product_detail_top_details {
    width: 100%;
    box-sizing: border-box;
    padding: 17px 15px 10px;
    background-color: #fff;
    margin-top: 0;

    .product_stylename {
      font-weight: 600;
      font-size: 18px;
      color: #1A1B1C;
      display: flex;
      align-items: center;

      .styleName {
        width: 0;
        flex: 1;
        margin-left: 10px;
      }

      .product_mechanism {
        width: 56px;
        height: 22px;
        background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
        border-radius: 5px;
        font-weight: 500;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        line-height: 22px;
      }
    }

    .product_box {

      position: relative;

      .product_fl_box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .box_l {
          display: flex;
          align-items: center;
          height: 30px;
          background: #EBF4FF;
          border-radius: 5px;
          margin-right: 7px;

          .l_title {
            width: 85px;
            height: 30px;
            background: url("@/assets/newui/details/icon_kucunbianma@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-weight: 500;
            font-size: 14px;
            color: #3F68DB;
            line-height: 14px;
            text-align: center;
            line-height: 30px;

            span {
              display: inline-block;
              transform: translateX(-4px);
            }
          }

          .l_code {
            font-weight: 500;
            font-size: 14px;
            color: #3F68DB;
            line-height: 14px;
            margin-left: 10px;
            max-width: 70px;
          }

          .l_copy {
            width: 15px;
            height: 15px;
            margin: 0 10px;
            background: url("@/assets/newui/details/icon_kucunbianmacopy@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        .box_r {
          width: 0px;
          flex: 1;
          height: 30px;
          background: #EBF4FF;
          border-radius: 5px 0px 5px 5px;
          text-align: center;
          position: relative;
          font-weight: 500;
          font-size: 14px;
          color: #3F68DB;
          line-height: 30px;

          .icon_69 {
            position: absolute;
            width: 49px;
            height: 16px;
            background: url("@/assets/newui/details/icon_69ma@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            right: 0;
            top: -16px;
          }
        }
      }
    }

    .product_ppbox {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .pp_item {
            height: 30px;
            background: #F7F7F7;
            border-radius: 5px;
            font-weight: 500;
            font-size: 14px;
            color: #464E5D;
            line-height: 30px;
            padding: 0 10px;
        }
    }

    .product_gysbox {
        display: flex;
        align-items: center;
        margin-top: 10px;

        .gys_l {
            height: 30px;
            width: 0;
            flex: 1;
            display: flex;
            align-items: center;
            padding: 0 10px;
            background: #FFE9E1;
            border-radius: 5px;
            font-weight: 500;
            font-size: 14px;
            color: #FF5A1A;
            line-height: 14px;

            .gys_img {
                width: 12px;
                height: 14px;
                background: url("@/assets/newui/details/gys.svg");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                margin-right: 5px;
            }
        }

        .gys_c {
            width: 66px;
            height: 30px;
            border-radius: 5px;
            font-weight: 500;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            margin-left: 10px;
            background: #EBF4FF;
            color: #0094FF;
        }
    }

    .product_id {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #825C2A;
      line-height: 12px;

      .produc_left {
        width: 210px;
        height: 20px;
        background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
        border-radius: 5px;
        padding: 0 5px;

        .copy {
          width: 12px;
          height: 12px;
          background: url("@/assets/newui/details/icon_zongsefuzhi@2x.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .coreName {
        width: 0px;
        flex: 1;
        margin-left: 5px;
        height: 20px;
        background: linear-gradient(180deg, #FCF2DB 0%, #FCE7C9 100%);
        border-radius: 5px;
        align-items: center;

        .goods_r_l {
          width: 34px;
          height: 20px;
          border-radius: 5px;
          border: 1px solid;
          text-align: center;
          line-height: 20px;
        }

        .goods_r_r {
          width: 0;
          flex: 1;
          text-align: center;
        }
      }

    }

    .product_user {
      width: 100%;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #8492AD;

      .van-image {
        width: 14px;
        height: 14px;
        margin-left: 10px;
      }

      .display {
        display: flex;
        align-items: center;
      }

    }

    .product_user {
      width: 100%;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      line-height: 12px;

      .examine {
        align-items: center;


        .examine_item {
          width: 85px;
          height: 22px;
          border-radius: 5px;
          margin-right: 15px;
          padding: 0 10px;

          .examine_img_y {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_lvseduihao@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }

          .examine_img_n {
            width: 12px;
            height: 12px;
            background: url("@/assets/newui/productList/icon_hongsecha@2x.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }

        .examine_y {
          background: #E7FDEE;
          color: #19D11B;
        }

        .examine_n {
          background: #FDE7E7;
          color: #FC2540;
        }

        .examine_items {
          width: 68px;
          height: 22px;
          background: #E3E5E8;
          border-radius: 13px;
          text-align: center;
          line-height: 22px;
          font-weight: 500;
          font-size: 12px;
          color: #8492AD;
        }
      }

    }

  
  }
  .product_ggbox {
    display: flex;
    margin-top: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #464E5D;
    line-height: 20px;
    white-space: wrap;
    word-break: break-all;
    text-align: justify;

    .ggimg {
        width: 14px;
        height: 14px;
        background: url("@/assets/newui/details/icon_guige.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 10px;
        transform: translateY(3px);
        flex-shrink: 0;

    }

    .qunimg {
        width: 14px;
        height: 14px;
        background: url("@/assets/newui/details/icon_duijiequnming.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 10px;
        transform: translateY(3px);
        flex-shrink: 0;

    }
}

.product_users {
    width: 345px;
    height: 65px;
    background: #F7F7F7;
    border-radius: 5px;

    .line {
        width: 1px;
        height: 25px;
        background-color: #ECECF2;
    }

    .product_users_item {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #8492AD;
        line-height: 14px;
        width: 0;
        flex: 1;
        text-align: center;

        .product_users_text {
            font-weight: 500;
            font-size: 14px;
            color: #1A1B1C;
            line-height: 14px;
            margin-top: 11px;
        }
    }
}  
//轮播计数
.hmshop-custom-indicator {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 30px;
    background: #000000aa;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 30px;
    font-style: normal;
    padding: 0 10px;
}

// 多机制TOP图片
.mechanism_mall {
    position: absolute;
    right: 0;
    top: 35px;
    width: 70px;
    height: 41px;
    background: url("@/assets/newui/details/icon_duojizhi@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.text-el {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-10 {
  margin-top: 10px;
}

.b-box {
  box-sizing: border-box;
}

.fl-box-s-b {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fl-box {
  display: flex;
}
.mechanism_area {
    padding: 0 15px;
}
</style>